<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 18:11:21
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-12 14:31:40
 * @FilePath: \company-world\src\views\userManagement\index.vue
 * @Description: 左侧树
-->
<template>
  <div class="tree-content">
    <div class="search-box">
      <el-input v-model="input" placeholder="请输入关键字进行筛选" />
      <el-scrollbar height="100%">
        <div class="tree">
          <el-tree
            ref="tree"
            default-expand-all
            :data="dataList"
            node-key="id"
            highlight-current
            @node-click="handleNodeClick"
            @current-change="handleNodeClick"
            :props="defaultProps"
          >
            <template #default="{ node }">
              <div class="label-content">
                <div class="action-icon">
                  <svg v-if="node.data.parent_id === 0" aria-hidden="true" width="18" height="18">
                    <use xlink:href="#iconjituan" />
                  </svg>
                  <svg v-else aria-hidden="true" width="18" height="18">
                    <use xlink:href="#iconxiangmu" />
                  </svg>
                </div>
                <div class="archi-label-txt">
                  {{ node.data[defaultProps.label] }}
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Itype } from '@/type/index'
import { ElMessage } from 'element-plus'
import { getDepartmentList } from '@/apis/organization/department'
import Bus from '@/utils/bus'
const emit = defineEmits(['search-data'])
const defaultProps = {
  children: 'children',
  label: 'department_name'
}
const input = ref('')
watch(
  () => input.value,
  (newVal: string) => {
    emit('search-data', newVal)
  }
)
/**
 * @desc: 部门筛选对于人员
 *
 */
interface Tree {
  label: ''
  children: []
  department_name: ''
  department_id: 0
  parent_id: ''
}
const handleNodeClick = (data: Tree) => {
  Bus.emit('click-Node', data.department_name, data.parent_id)
}
/**
 * @desc:获取部门岗位数据
 */
interface Isearch {
  [key: string]: any
}
let search: Isearch = ref()
const loading = ref(false)
let dataList: Itype = ref()
let searchList: Isearch = ref([])
const getData = (data?: string) => {
  loading.value = true
  getDepartmentList()
    .then((res) => {
      if (res) {
        dataList.value = res
        dataList.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
        if (data) {
          dataList.value = dataList.value.filter((item: Itype) => {
            return filterItem(item, data)
          })
        }
        loading.value = false
      }
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误——————')
    })
}
getData()
/**
 * @desc: 筛选数据
 */
const filterItem = (item: Itype, name: string) => {
  if (item.department_name.indexOf(name) !== -1) return true
  if (item.children) {
    item.children = item.children.filter((sonEle: Itype) => {
      return filterItem(sonEle, name)
    })
    if (item.children.length > 0) {
      return true
    }
  }
  return false
}
defineExpose({
  getData
})
</script>

<style lang="less" scoped>
:deep(.el-tree) {
  background: transparent !important;
}

:deep(.el-input__wrapper) {
  height: 36px;
}
.tree-content {
  width: 100%;
  height: 100%;
  padding: 30px 10px;
  box-sizing: border-box;
  background: #fafbfc;
  .search-box {
    height: 100%;
    .menu-input {
    display: flex;
    align-items: center;
    padding: 0 0 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    white-space: nowrap;
    .input {
      width: 220px;
      margin-left: 5px;
      font-size: 14px;
    }
  }
    .search-box-input {
      padding: 30px 18px;
      box-sizing: border-box;
      border-radius: 4px;
    }
    .tree {
      .action-icon {
        padding-right: 10px;
        box-sizing: border-box;
      }
      .label-content {
        display: flex;
        flex: 1;
        align-items: center;
        .archi-label-txt {
          overflow: hidden;
          flex-grow: 1;
          flex-shrink: 0;
          width: 0;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .edit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        margin-left: 6px;
        margin-right: 4px;
        border-radius: 4px;
        text-align: center;
        opacity: 0;
        .dropdown-container {
          width: 100%;
          height: 100%;
          .el-dropdown-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding-right: 5px;
            box-sizing: border-box;
            line-height: 18px;
            i {
              width: 16px;
              height: 16px;
              font-size: 16px;
            }
          }
        }
      }
      :deep(.el-tree-node__content) {
        justify-content: space-between;
        height: 38px;
        &:hover .edit {
          opacity: 1;
        }
      }
    }
  }
}
</style>
